<template>
  <div class="user-overview">
    <div class="user-title">资源概览</div>
    <div>
      <div class="user-server-title-wrap">
        <div class="user-server-title-wrap-item">
          <!-- <div class="user-server-title-wrap-item-spot" style="background-color:rgb(244,152,54) ;" /> -->
          服务器
        </div>
        <div class="user-server-title-wrap-item">
          <!-- <div class="user-server-title-wrap-item-spot" style="background-color:rgb(62,173,242) ;" /> -->
          存储
        </div>
        <div class="user-server-title-wrap-item">
          <!-- <div class="user-server-title-wrap-item-spot" style="background-color:rgb(203,247,231);" /> -->
          操作系统
        </div>
      </div>
      <div class="user-server-wrap">
        <div id="user-server-left"></div>
        <div id="user-server-center"></div>
        <div id="user-server-right"></div>
      </div>
    </div>
  </div>
</template>

<script>
var option1 = null;
var option2 = null;
var option3 = null;
export default {
  name: "userIndex",
  components: {},
  data() {
    return {};
  },
  watch: {},
  created() {},
  mounted() {
    // window.addEventListener("resize", () => {
    //   this.draw();
    // });
  },
  methods: {
    draw() {
      if (!option1) {
        return;
      }
      this.flag = false;
      setTimeout(() => {
        this.flag = true;
        setTimeout(() => {
          let myChart1 = this.$echarts.init(
            document.getElementById("user-server-left")
          );
          let myChart2 = this.$echarts.init(
            document.getElementById("user-server-center")
          );
          let myChart3 = this.$echarts.init(
            document.getElementById("user-server-right")
          );
          myChart1.setOption(option1);
          myChart2.setOption(option2);
          myChart3.setOption(option3);
        }, 10);
      }, 10);
    },
    init(data) {
      this.server1(data);
      this.server2(data);
      this.server3(data);
      setTimeout(() => {
        this.draw();
      }, 50);
    },

    server1(data) {
      const list = [
        {
          value: data.ecsCount,
          name: "云服务器",
          unit: "台",
        },
        {
          value: data.phyCount,
          name: "高性能服务器",
          unit: "台",
        },
      ];
      option1 = this.optionFormat(list);
    },
    server2(data) {
      const list = [
        {
          value: data.romFbsCount,
          name: "分布式存储(通用型)",
          unit: "TB",
        },
        {
          value: data.romFcCount,
          name: "集中式存储(通用型)",
          unit: "TB",
        },
        {
          value: data.romFcgxnCount,
          name: "集中性存储(高性能)",
          unit: "TB",
        },
      ];
      option2 = this.optionFormat(list);
    },
    server3(data) {
      const list = [
        {
          value: data.osWindowsCount,
          name: "Windows",
          unit: "套",
        },
        {
          value: data.osLinuxCount,
          name: "Linux",
          unit: "套",
        }, {
          value: data.osChinaCount,
          name: "国产操作系统",
          unit: "套",
        },
      ];
      option3 = this.optionFormat(list);
    },
    optionFormat(list) {
      return {
        color: ["#2e76ff", "#45c6fc", "#ff6161", "#f5d900", "#7d7d7d"],
        animationDuration: 5000,
        title: {
          text: "",
          left: "center",
          fontSize: "16",
        },
        tooltip: {
          trigger: "item",
          formatter2(v) {
            const d = list.find((e) => e.name === v);
            return `${v} ${d.value} ${d.unit}`;
          },
          formatter: function (params) {
            let html='';
            html+='<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:'+params.color+';"></span>'
            html+=params.name+": "+params.percent+"%";
            return html;
          }
        },
        grid: {
          top:'15%',//距上边距
        },


        legend: {
          top: "62%",
          left: "center",
          formatter(v) {
            const d = list.find((e) => e.name === v);
            return `${v} ${d.value} ${d.unit}`;
          },
        },
        series: [
          {
            type: "pie",
            radius: '50%',
            center: ["50%", "32%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: false,
                fontSize: "16",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: list,
          },
        ],
      };
    },
  },
};
</script>

<style scoped lang="scss">
.user-overview {
  margin: 20px 0 0 0px;
  background: white;
  border-radius: 6px;
  padding: 16px 16px 0 16px;
  width: 48%;
  width: 700px;
  height: 284px;

  .user-title {
    border-left: 3px solid rgb(138, 205, 255);
    font-weight: bold;
    padding-left: 10px;
    margin-bottom: 10px;
  }

  .user-server-title-wrap {
    display: flex;

    .user-server-title-wrap-item {
      display: flex;
      width: 50%;
      padding: 0 20px;

      .user-server-title-wrap-item-spot {
        width: 6px;
        height: 6px;
        border-radius: 6px;
        margin: 6px 4px 0 0;
      }

      img {
        width: 20px;
        height: 20px;
        margin-left: 190px;
        cursor: pointer;
      }
    }
  }

  .user-server-wrap {
    display: flex;

    > div {
      width: 200px;
      height: 214px;
    }
  }
  .user-overview-storage {
    display: flex;
    justify-content: space-around;
    img {
      width: 40px;
    }
    .user-overview-storage-center {
      display: flex;
      flex-wrap: wrap;
      width: 480px;
    }
    .user-overview-storage-right {
      padding-top: 20px;
      color: rgb(174, 182, 224);
      display: flex;
      div {
        color: rgb(120, 124, 202);
        margin: 0 6px 0 0px;
      }
    }
  }
}
</style>
